<template>
  <div class="advisoryBox">
    <div class="searchBox" style="margin-bottom:20px">
      <span style="margin-left:10px">是否为推荐资询会：</span>
      <el-select v-model="listQuery.isRecommend" placeholder="请选择" style="width: 120px;" clearable>
        <el-option label="是" :value='1'></el-option>
        <el-option label="否" :value='0'></el-option>
      </el-select>
      <span style="margin-left:10px">是否为升学资询会：</span>
      <el-select v-model="listQuery.isSxConference" placeholder="请选择" style="width: 120px;" clearable>
        <el-option label="是" :value='1'></el-option>
        <el-option label="否" :value='0'></el-option>
      </el-select>
      <span style="margin-left:10px">创建时间:</span>
      <el-date-picker v-model="listQuery.createDate" type="date" value-format="yyyy-MM-dd" placeholder="选择日期">
      </el-date-picker>
      <el-button type="primary" icon="el-icon-search" @click="handReaserch" style="margin-left:10px">搜索</el-button>
      <el-button type="primary" @click="adds" style="margin-left:10px">新增资讯</el-button>
    </div>
    <el-table :data="tableData" style="width: 100%" border v-loading='loading' element-loading-text="数据加载中，请稍后">
      <el-table-column prop="id" label="id" align='center'>
      </el-table-column>
      <el-table-column prop="title" label="标题" align='center'>
      </el-table-column>
      <el-table-column prop="imgUrl" label="封面" align='center'>
        <template slot-scope="scope">
          <img :src="scope.row.imgUrl" alt="">
        </template>
      </el-table-column>
      <el-table-column prop="createTime" label="创建时间" align='center'>

      </el-table-column>
      <el-table-column prop="isRecommend" label="是否为推荐资询会：" align='center'>
        <template slot-scope="scope">
          <span>{{scope.row.isRecommend ==0?'否':'是'}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="isSxConference" label="是否为升学资询会" align='center'>
        <template slot-scope="scope">
          <span>{{scope.row.isSxConference ==0?'否':'是'}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="" label="操作" align='center'>
        <template slot-scope="scope">
          <el-button type="success" icon="el-icon-edit" size='mini' @click="edit(scope.row)">编辑</el-button>
          <el-button type="danger" icon="el-icon-delete" size='mini' @click="del(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <div class="pagination-container">
      <el-pagination @size-change="handleSizeNotesChange" @current-change="handleCurrentNotesChange" :current-page="currentPage"
        :page-sizes="[5,10]" layout="total, sizes, prev, pager, next, jumper" :total="this.total">
      </el-pagination>
    </div>

    <!-- //编辑页 -->
    <el-dialog title="编辑页" :visible.sync="dialogVisible" width="50%">
      <el-form ref="forms" label-width="80px" :model="dialog">
        <el-form-item label="标题:" prop="title">
          <el-input v-model="dialog.title" placeholder="请输入标题"></el-input>
        </el-form-item>
        <el-form-item label="是否为升学资讯会" prop="resource">
          <el-radio-group v-model="dialog.isRecommend">
            <el-radio label="1">是</el-radio>
            <el-radio label="0">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="是否为推荐资讯会" prop="resource">
          <el-radio-group v-model="dialog.isSxConference">
            <el-radio label="1">是</el-radio>
            <el-radio label="0">否</el-radio>
          </el-radio-group>
        </el-form-item>
        </el-form-item>
        <el-form-item label="请上传图片" prop="resource">
          <el-upload style="margin-left:10px" :headers="headers" action="/tools/oss/upload" :on-preview="handlePreview"
            :on-remove="handleRemove" :on-success="handleUploadSuccess" accept=".png,.jpg,.jpeg,.gif"
            list-type="picture" :file-list="fileList" :limit="1">
            <el-button size="small" type="primary">上传封面</el-button>
          </el-upload>
        </el-form-item>
        <el-form-item label="请输入内容" prop="content" class="tinymc">
          <div class="editor-container">
            <el-tooltip class="item" effect="dark" content="请输入内容" placement="top">
              <el-form-item class="postInfo-container-item" prop="content">
                <Tinymce :height=400 ref="editor" v-model="dialog.content" :value="dialog.content" />
              </el-form-item>
            </el-tooltip>
          </div>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="sure">确 定</el-button>
      </span>
    </el-dialog>

    <!-- //新增页 -->
    <el-dialog title="新增页" :visible.sync="dialogVisibles" width="50%">
      <el-form ref="form" label-width="80px" :model="dialogs">
        <el-form-item label="标题:" prop="title">
          <el-input v-model="dialogs.title" placeholder="请输入标题"></el-input>
        </el-form-item>
        <el-form-item label="是否为升学资讯会">
          <el-radio-group v-model="dialogs.isRecommend">
            <el-radio :label="1">是</el-radio>
            <el-radio :label="0">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="是否为推荐资讯会">
          <el-radio-group v-model="dialogs.isSxConference">
            <el-radio :label="1">是</el-radio>
            <el-radio :label="0">否</el-radio>
          </el-radio-group>
        </el-form-item>
        </el-form-item>
        <el-form-item label="请上传图片" prop="resource">
          <el-upload style="margin-left:10px" :headers="headers" action="/tools/oss/upload" :on-preview="handlePreview"
            :on-remove="handleRemove" :on-success="handleUploadSuccess" accept=".png,.jpg,.jpeg,.gif"
            list-type="picture" :file-list="fileList" :limit="1">
            <el-button size="small" type="primary">上传封面</el-button>
          </el-upload>
        </el-form-item>
        <el-form-item label="请输入内容" prop="content" class="tinymc">
          <div class="editor-container">
            <el-tooltip class="item" effect="dark" content="请输入内容" placement="top">
              <el-form-item class="postInfo-container-item" prop="content">
                <Tinymce :height=400 ref="editor" v-model="dialogs.content" :value="dialogs.content" />
              </el-form-item>
            </el-tooltip>
          </div>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisibles = false">取 消</el-button>
        <el-button type="primary" @click="sures">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import { getList, query, update, add, dele } from '@/api/information'
  import Tinymce from '@/components/Tinymce'
  import { getToken } from '@/utils/auth'
  export default {
    components: { Tinymce },
    data() {
      return {
        listQuery: {
          isRecommend: null,
          isSxConference: null,
          pageNo: 1,
          pageSize: 10,
          createDate: null,
        },
        content: '',
        currentPage:null,
        loading: true,
        tableData: [],
        total: null,
        dialogVisible: false,
        dialogVisibles: false,
        queryData: [],
        fileList: [],
        headers: '',
        id: null,
        dialog: {
          title: '',
          radio: 0,
          isRecommend: 0,
          isSxConference: 0,
          content: ''
        },
        dialogs: {
          title: '',
          radio: 0,
          isRecommend: 0,
          isSxConference: 0,
          content: ''
        },

      }
    },
    mounted() {
      this.headers = { accessToken: getToken() }
      this.fetchData()
    },
    methods: {
      handReaserch() {
        this.listQuery.pageNo = 1
        this.listQuery.pageSize = 10
        this.fetchData()
      },
      fetchData() {
        this.loading = true
        getList(this.listQuery).then(res => {
          if (res.code == 0) {
            this.loading = false
            this.tableData = res.data.list
            this.total = res.data.total
            this.currentPage = res.data.pageNum
          }
        })
      },
      handleSizeNotesChange(val) {
        this.listQuery.pageSize = val
        this.fetchData()
      },
      handleCurrentNotesChange(val) {
        this.listQuery.pageNo = val
        this.fetchData()
      },
      edit(scope) {
        this.dialogVisible = true
        this.id = scope.id
        query(scope.id).then((res) => {
          if (res.code == 0) {
            this.queryData = res.data
            this.dialog.title = this.queryData.title,
            this.dialog.isRecommend = this.queryData.isRecommend + ""
            this.dialog.isSxConference = this.queryData.isSxConference + ""
            this.fileList = [{ url: this.queryData.imgUrl, name: this.queryData.imgUrl }]
            this.dialog.content = this.queryData.content
          }
        })
      },
      handlePreview(file) {
      },
      handleRemove(file, fileList) {
        this.fileList = [];
      },
      handleUploadSuccess(rst, file, fileList) {
        if (rst) {
          let { code, data: { picUrlList } } = rst;
          let { postForm } = this;
          let url = rst.data.picUrlList[0]
          if (code == 0) {
            this.fileList = [{ name: url, url: url }];
          }
        }
      },
      sure() {
        this.$refs["forms"].validate((valid) => {
            if(!this.fileList.length){
              this.$message({
              message: '请上传封面',
              type: 'error',
              duration: 1000
            });
            }else{
              if (valid) {
              const params = {
                id: this.id,
                title: this.dialog.title,
                isSxConference: this.dialog.isSxConference,
                isRecommend: this.dialog.isRecommend,
                imgUrl: this.fileList[0].name,
                content:this.dialog.content
              }
              this.$confirm('将编辑资讯, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
              }).then(() => {
                this.dialogVisible = false
                update(params).then(res => {
                  if (res.code == 0) {
                    this.fetchData()
                  }
                })
              }).catch(() => {
                this.$message({
                  type: 'info',
                  message: '已取消操作'
                });
              })
            }
            }
        });
      },
      adds() {
        this.dialogVisibles = true
        this.fileList = []
        this.dialogs.title = ''
        this.dialogs.content = ''
        this.dialogs.isRecommend = 0
        this.dialogs.isSxConference = 0
        let url = null
      },
      del(scope) {
        let id = scope.id
        this.$confirm('确定执行删除操作, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          dele(id).then((res) => {
            if (res.code == 0) {
              this.fetchData()
            }
          })
        })

      },
      sures() {
        this.$refs["form"].validate((valid) => {
          if (!this.dialogs.title) {
            this.$message({
              message: '请输入标题',
              type: 'error',
              duration: 1000
            });
          }
          if (this.fileList == 0) {
            this.$message({
              message: '请上传封面',
              type: 'error',
              duration: 1000
            });
          }
          if (!this.dialogs.content) {
            this.$message({
              message: '请输入内容',
              type: 'error',
              duration: 1000
            })
          } else if(!this.fileList.length){
            this.$message({
              message: '请上传封面',
              type: 'error',
              duration: 1000
            })
          }else{
            if (valid) {
              if (this.fileList.length > 0) {
                this.dialogs['imgUrl'] = this.fileList[0].url
              }
              this.$confirm('将新增资讯, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
              }).then(() => {
                add(this.dialogs).then(res => {
                  if (res.code == 0) {
                    this.fetchData()
                    this.dialogVisibles = false
                    this.$message({
                      message: '新增咨询成功',
                      type: 'success'
                    })
                  }
                })
              }).catch(() => {
                this.$message({
                  type: 'info',
                  message: '已取消操作'
                });
              })
            } else {

            }
          }

        });
      }
    }
  }

</script>
<style>
  .advisoryBox {
    padding: 20px
  }

  .tinymc .el-form-item__content {
    margin-left: 60px !important;
  }

  .widht {
    width: 180px;
  }

  .advisoryBox img {
    width: 100px;
    height: auto;
  }
</style>